<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
    <link rel="stylesheet" th:href="@{/src/zTree_v3/css/zTreeStyle/zTreeStyle.css}">
</head>
<body>
<form class="layui-form" style="width:80%;" id="arf">
    <!-- 权限提交隐藏域 -->
    <input type="hidden" id="menuId" name="menuId"/>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" class="layui-input userName" lay-verify="required"
                   placeholder="请输入角色名" name="roleName">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入角色描述" class="layui-textarea linksDesc"
                      lay-verify="required" name="roleRemark" ></textarea>
        </div>
    </div>
    <!--权限树xtree  -->
    <div class="layui-form-item">
        <label class="layui-form-label">分配权限：</label>
        <ul id="xtree" class="ztree" style="width:200px;margin-left: 105px"></ul>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="editRole">立即提交</button>
        </div>
    </div>
</form>
<script th:src="@{/src/layui.js}"></script>
<script th:src="@{/src/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/src/zTree_v3/js/jquery.ztree.all.js}"></script>
<script>

        layui.use(['form','jquery','layer'],function () {
            var form = layui.form,
                $ = layui.jquery,
                layer = layui.layer;
            form.on('submit(editRole)',function (data) {

                //获取zTree对象
               var tree =  $.fn.zTree.getZTreeObj("xtree");
                //获取被选中的节点数据,true表示获取选中的节点。
               var arr = tree.getCheckedNodes(true);
               var str = "";
               $.each(arr,function (index,obj) {
                   str += obj.menuId+",";
               })
                str = str.substring(0,str.length-1);
                //将所有选中的菜单id拼接成字符串，存储在隐藏域中。
                $("#menuId").val(str);
               $.ajax({
                   url:'/roles/saveRole',
                   data:$("#arf").serialize(),  //menuId=1001&roleRemark=描述&roleName=角色名称
                   type:'post',
                   dataType:'json',
                   success:function (result) {
                       if(result.code == 200){
                           layer.msg('添加成功',{icon:1},function () {
                               top.layer.closeAll('iframe');
                               //重新加载数据
                               parent.location.reload();
                           })
                       }else{
                           layer.msg(reuslt.message,{icon:5});
                       }
                   }
               })

               return false;
            })
        })


    $(function () {
        //配置初始化参数
        var settings={
            data:{
                simpleData:{
                    enable:true,
                    idKey:'menuId', //节点的id
                    pIdKey:'parentId'//节点的父id
                },
                key:{
                    name:'title',//节点显示的名称
                    title:'title' //鼠标悬停在节点上提示的文本信息
                }
            },
            check:{
                enable:true  //使用复选框
            },
            view:{
                showIcon:false  //不显示图标
            }
        }


        //异步加载tree的数据
        $.ajax({
            url:'/menus/loadTree',
            dataType:'json',
            type:'get',
            success:function (result) {
                //初始化ztree
                $.fn.zTree.init($("#xtree"),settings,result);
            }
        });
    })
    
</script>
</body>
</html>